<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>禁止贪婪的使用(标签替换)</title>
</head>
<body>
    <div>
        <!-- 
            在需要替换标签的时候 由于正则会贪婪匹配
                所以当标签比较多的时候 常常会匹配到太多合并的标签
                    这种情况不是我们所想要的
                所以就需要禁止正则的贪婪匹配
                = 就需要使用?(在已经又贪婪匹配符+*?的签替下使用)
         -->
        <span>Jimmy</span>
        <span>Welcome</span>
        <span>to my home</span>
    </div>
</body>
<script>
    const text = document.querySelector('div')
    // 这样写 表面上好像能够得到所有的span元素 但是其实是错误的 因为正则会贪婪匹配
    // 会将第一行的span当成开头 第三行结束变成结尾
    const reg = /<span>([\s\S]+)<\/span>/ig
    console.dir(text.innerHTML.match(reg))
    // 正确的做法应该是禁止贪婪
    const reg1 = /<span>([\s\S]+?)<\/span>/ig
     /*
        replace 第二个参数是一个回调函数 
            回调函数的第一个参数就是正则匹配的本体 
                第二个参数就是第一个原子组
                第三个参数就是第二个原子组    
    */
    text.innerHTML = text.innerHTML.replace(reg1,(el,p1)=>{
        return `<h4>${p1}</h4>`
    })
    // console.log(str)
</script>
</html>